<template>
  <Row class="login">
    <Row>
      <div class="content">
        <Row class="logo">新纪元<strong style="color:#F13E3F">TMS</strong></Row>
        <Form ref="loginInfo" :model="loginInfo" :rules="loginInfo">
          <Form-item prop="user">
            <Input type="text" v-model="loginInfo.user" placeholder="Username">
            <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Form-item prop="password">
            <Input type="password" v-model="loginInfo.password" placeholder="Password" @on-enter="loginClick('loginInfo')">
            <Icon type="ios-locked-outline" slot="prepend"></Icon>
            </Input>
          </Form-item>
          <Row class="remember-password">
            <Checkbox v-model="remember">记住密码</Checkbox>
          </Row>
          <Form-item>
            <Button type="primary" @click="loginClick('loginInfo')" class="w100">登录</Button>
          </Form-item>
        </Form>
      </div>
    </Row>
  </Row>
</template>

<script>
  export default {
    data () {
      return {
        loginInfo: {
          user: '',
          password: ''
        },
        remember: false,
        ruleInline: {
          user: [{
            required: true,
            message: '请填写用户名',
            trigger: 'blur'
          }],
          password: [{
              required: true,
              message: '请填写密码',
              trigger: 'blur'
            },
            {
              type: 'string',
              min: 6,
              message: '密码长度不能小于6位',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    mounted () {
      this.rememberUser()
    },
    methods: {
      loginClick: function (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.login()
          } else {
            this.$Message.error('登录失败!')
          }
        })
      },
      login: function () {
        let login = {
          floginname: this.loginInfo.user,
          fpassword: this.loginInfo.password
        }
        this.$http.post(this.url + 'user/login',
          login
        ).then(response => {
          let isOk = response.data
          if (isOk.success) {
            if (this.remember) {
              localStorage.setItem('name', this.loginInfo.user)
              localStorage.setItem('pass', this.loginInfo.password)
            } else {
              localStorage.removeItem('name')
              localStorage.removeItem('pass')
            }
            localStorage.webtoken = isOk.obj.webtoken
            this.$router.replace({
              path: '/home'
            })
          } else {
            this.$Message.error(isOk.msg)
          }
        }, response => {

        })
      },
      rememberUser: function () {
        if (localStorage) {
          if (localStorage.getItem('name') != null && localStorage.getItem('pass') != null) {
            this.loginInfo.user = localStorage.getItem('name')
            this.loginInfo.password = localStorage.getItem('pass')
            this.remember = true
          } else {
            this.remember = false
          }
        } else {
          this.remember = false
        }
      }
    }
  }

</script>
